$_WIDTH:1200px;
.Community
{
    width           : 100%;
    min-height      : 100vh;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    background-color: #f6f6f6;
    .Crowd
    {
        width : 100%;
        height: 200px;
    }
    .C_Main
    {
        width         : $_WIDTH;
        display       : flex;
        flex-direction: column;
        box-sizing    : border-box;
        .StoryTabs
        {
            display         : flex;
            width           : 100%;
            height          : 60px;
            box-sizing      : border-box;
            padding         : 10px;
            background-color: white;
            margin-bottom   : 10px;
            >.ant-radio-group
            {
                display    : flex;
                align-items: center;
                label
                {
                    margin-left: 10px;
                }
            }
        }
        .QuestionList
        {
            display       : flex;
            flex-direction: row;
            .ant-list
            {
                background-color: white;
                width           : 900px;
                min-height      : 270px;
                margin-right    : 10px;
                .ant-list-item-action
                {
                    li
                    {
                        cursor: pointer;
                    }
                }
                .ant-list-item-extra
                {
                    >img
                    {
                        width : 272px;
                        height: 168px;
                    }
                }
            }
            .CreatorEntrance
            {
                width           : 100%;
                height          : 270px;
                box-sizing      : border-box;
                padding         : 10px;
                background-color: white;
                /** 🐂sticky还用什么固钉 **/
                position        : sticky;
                position        : -webkit-sticky;
                top             : 0;
                >img
                {
                    width : 100%;
                    height: 200px;
                }
            }
        }
    }
    .PostAriticle
    {
        max-width: 660px;
        .AddAdvertImg
        {
            width           : 100%;
            height          : auto;
            min-height      : 200px;
            box-sizing      : border-box;
            display         : flex;
            flex-direction  : column;
            justify-content : center;
            align-items     : center;
            cursor          : pointer;
            background-color: white;
            >p
            {
                position   : relative;
                top        : -10px;
                opacity    : 0;
                transition : all .3s;
                user-select: none;
                color      : rgba(18,18,18,.2);
                font-size  : 16px;
            }
            &:hover
            {
                >p
                {
                    top    : 0;
                    opacity: 1;
                }
            }
            >input[type="file"]
            {
                display: none;
            }
            >img
            {
                width     : 100%;
                height    : auto;
                max-height: 660px;
            }
        }
        .AddTitle
        {
            border     : none;
            outline    : none;
            box-shadow : none;
            height     : 90px;
            font-size  : 40px;
            font-weight: bold;
            padding    : 6.5px 20px;
        }
        .CEditer
        {
            >div
            {
                border: none !important;
            }
            img
            {
                display: block;
                margin : 0 auto
            }
            .w-e-text blockquote
            {
                color      : #646464;
                border-left: 3px solid #d3d3d3;
            }
        }
    }
    .ArticleContent
    {
        width: 690px;
        .A_Title
        {
            >div
            {
                display    : flex;
                align-items: center;
                box-sizing : border-box;
                padding    : 15px 0;
                >div
                {
                    display       : flex;
                    flex-direction: column;
                }
            }
        }
        .A_Content
        {
            img
            {
                display: block;
                margin : 0 auto;
            }
            blockquote
            {
                color      : #646464;
                border-left: 3px solid #d3d3d3;
            }
        }
        .A_Comment
        {
            .CommentInput
            {
                display        : flex;
                justify-content: space-between;
                margin-bottom  : 10px;
                .ant-avatar
                {
                    // margin-right: 30px;
                    >img
                    {
                        width: 46px;
                    }
                }
                >div
                {
                    display       : flex;
                    flex-direction: column;
                    width         : 100%;
                    box-sizing    : border-box;
                    padding-left  : 30px;
                    >textarea
                    {
                        width     : 100%;
                        border    : 1px solid lightgray;
                        transition: all .3s;
                        box-sizing: border-box;
                        padding   : 10px;
                        resize    : none;
                        &:hover{
                            border: 1px solid #1890ff;
                        }
                        &:focus
                        {
                            outline   : none;
                            border    : 1px solid #1890ff;
                            box-shadow: 0px 0px 2px #1890ff ;
                        }
                    }
                }
                .PostImgs
                {
                    display: flex;
                    >div
                    {
                        box-sizing: border-box;
                        padding   : 5px;
                        position  : relative;
                        &:hover{
                            & button
                            {
                                opacity: 1;
                            }
                        }
                        >img
                        {
                            width   : 70px;
                            height  : 70px;
                        }
                        >button
                        {
                            position  : absolute;
                            top       : 0;
                            right     : 0;
                            opacity   : 0;
                            transition: all .3s;
                        }
                    }
                    >span
                    {
                        align-self: flex-end;
                        color     : #9b9b9b;
                    }
                }
            }
            .ant-comment-avatar img
            {
                width    : 100%;
                height   : 100%;
                transform: scale(70%);
            }
            .CommentItem
            {
                span
                {
                    user-select: none;
                    cursor     : pointer;
                }
                .CommentContent
                {
                    img
                    {
                        max-width   : 300px;
                        max-height  : 300px;
                    }
                }
            }
        }
    }
}
